<!-- 部门管理 -->
<template>
  <div class="content">

    <!-- 列表栏 -->
    <el-table
      :data="dataList"
      row-key="deptId"
      ref="refFilterTable"
      :loading="loading"
      :tree-props="{ children: 'childrens', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="deptName" label="部门名称"> </el-table-column>
      <el-table-column prop="deptCode" label="部门编号"> </el-table-column>
      <el-table-column
        align="right">
        <template slot="header" slot-scope="scope">
           <el-button type="primary" @click="upDateDept(1, {})">新增</el-button>
        </template>
        <template slot-scope="scope">
          <el-button type="text" v-if="scope.row.deptId != 1" @click="upDateDept(2, scope.row)">修改</el-button>
          <!-- <el-button type="text" v-if="scope.row.deptId != 1" @click="delDept(scope.row.deptId)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增编辑部门 -->
    <update-dept
      ref="updateDeptDialog"
      :isAdd="isAdd"
      :detailData="deptData"
      :deptList="dataList"
      :addEditVisible="addEditVisible"
    ></update-dept>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { parseTime, formatTime } from '@/utils'
import SearchForm from '@/components/searchForm/searchTable'
import FilterTable from '@/components/filterTable/index'
import { getDeptList } from '@/api/rightsManage'
import UpdateDept from './components/updateDept'
import { removeDept } from '@/api/rightsManage'
export default {
  name: 'roleList',
  components: { SearchForm, FilterTable, UpdateDept },
  computed: {
    ...mapGetters(['name', 'userInfo'])
  },
  data() {
    return {
      loading:false,
      exportButtomLoading: false,
      addEditVisible: false,
      isAdd: 1,
      deptData: {},
      filterData: {
        deptName: ''
      },
      dataList: [],
      newDataList:[],
    }
  },
  created() {},
  mounted() {
    this.getDataList()
  },
  methods: {
    // 获取列表数据
    getDataList() {
      this.loading = true
      getDeptList(Object.assign({}, this.filterData)).then(res => {
        this.loading = false
        this.dataList = this.listConvertTree(res.data)
      })
    },
    // 新增编辑部门
    upDateDept(type, item) {
      this.isAdd = type
      this.deptData = Object.assign({}, item)
      this.$refs.updateDeptDialog.addEditVisible = true
    },
    // 删除部门
    delDept(deptId){
      this.$confirm('确认删除部门?',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removeDept({deptId:deptId}).then(res=>{
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getDataList();
          });
        }).catch(() => {})
    },
    // 分页联动
    pageChange(pagedata) {
      setTimeout(() => {
        this.pagination = pagedata
      }, 1)
    },
    // 线性转树结构
    listConvertTree(data) {
      //没有父节点的数据
      let parents = data.filter(
        value => value.parentId == 'undefined' || value.parentId == null || value.parentId == 0
      )
      //有父节点的数据
      let childrens = data.filter(
        value => value.parentId !== 'undefined' && value.parentId != null && value.parentId > 0 
      )
      
      //定义转换方法的具体实现
      let translator = (parents, childrens) => {
        //遍历父节点数据
        parents.forEach(parent => {
          //遍历子节点数据
          childrens.forEach((current, index) => {
            //此时找到父节点对应的一个子节点
            if (current.parentId === parent.deptId) {
              //对子节点数据进行深复制，这里只支持部分类型的数据深复制
              let temp = JSON.parse(JSON.stringify(childrens))
              //让当前子节点从temp中移除，temp作为新的子节点数据，这里是为了让递归时，子节点的遍历次数更少，如果父子关系的层级越多，越有利
              temp.splice(index, 1)
              //让当前子节点作为唯一的父节点，去递归查找其对应的子节点
              translator([current], temp)
              //把找到子节点放入父节点的childrens属性中
              typeof parent.childrens !== 'undefined'
                ? parent.childrens.push(current)
                : (parent.childrens = [current])
            }
          })
        })
      }
      //调用转换方法
      translator(parents, childrens)

      console.log('parents',parents)
      console.log('childrens',childrens)
      //返回最终的结果
      return parents
    },
  },
  watch: {}
}
</script>

<style lang="scss" scoped>
.filterForm {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.el-form-item {
  margin-bottom: 0 !important;
}
</style>





